<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>登录</title>
  <script type="text/javascript" src="jquery-2.1.4.min.js"></script>

  </head>
<body>
<!--添加iframe避免页面刷新 -->
<form id="uploadfile" target="iframeUpload">
  <iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:NONE"></iframe>
  <input id="test_file" name="test_file" type="file">
  <input type="button" value="上传" onclick="doUpload()" />
</form>
<img alt="" src="" id="img">

<script type="text/javascript">
/*图片上传并立马回显 */
function doUpload() {
  var formData = new FormData($( "#uploadfile" )[0]);
  $.ajax({
  url: "uploadfile" ,
  type: 'POST',
  data: formData,
  async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function (returndata) {
  alert(returndata);
  $("#img").attr("src",returndata);
  },
  error: function (returndata) {
  alert(returndata);
  }
  });
}

/*form表单提交分为两种 ，一种是不需要后台回传数据的 */

//$("#formId").submit();

//第二种可以使用ajax提交form表单

/*
jQuery ajax - serialize() 方法
定义和用法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
表单必须定义name属性，因为后台获取时就是根据那么获取

*
*/
/* $.ajax({
cache: true,
type: "POST",
url: "uploadfile",
data: $('#uploadfile').serialize(),// 你的formid
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
$("#commonLayout_appcreshi").parent().html(data);\
}
});
 */
//但是这种序列化的方式不能提交二进制文件，所以需要另外一种方式formData
/* 
function doUpload() {
  var formData = new FormData($( "#uploadfile" )[0]);
  $.ajax({
  url: "uploadfile" ,
  type: 'POST',
  data: formData,
  async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function (returndata) {
  alert(returndata);
  $("#img").attr("src",returndata);
  },
  error: function (returndata) {
  alert(returndata);
  }
  });
} */

</script>
</body>
</html>